Post
Ask Question

ASP.NET Core Sample Website - Calculator

In this article, I will explain how to create a simple Web Calculator using .NET Core. This article does not set up the database but if you would like to create one, here are some examples.

Some useful tips when creating your database,

Data Annotations

How to publish your .NET Core Application to Azure,

NET Core App Hosted by Azure

What is ASP.NET core and why do we use it?

  • Easy to develop Web Pages as well as Web APIs.
  • Integration of modern frameworks and development workflows.
  • Easy to integrate with Azure.
  • Natural dependency injection support.
  • Large hosting variety, like on IIS, Apache, Docker, or self-host in your own process.
  • A wide range of tools that simplifies web development.
  • Multi-platform, so you may build and run on Windows, macOS, and Linux.
  • Open-source and with a powerful community.

We are using a single controller with two Action Results - one for the first HttpGet and another to calculate the operation on the server side. Here is the code.

public class HomeController : Controller  
{  
    [HttpGet]  
    public IActionResult Index()  
    {  
        return View();  
    }  
    [HttpPost]  
    public IActionResult Index(Operation model)  
    {  
        if (model.OperationType == OperationType.Addition)  
            model.Result = model.NumberA + model.NumberB;  
        return View(model);  
    }  
}

This is the View.

@model Operation
<form asp-controller="Home" asp-action="Index" method="post">
    <div class="form-group">
        <div class="row">
            <label asp-for="NumberA" class="col-lg-2"></label>
            <input type="number" asp-for="NumberA" class="col-lg-2" />
        </div>
        <div class="row">
            <label asp-for="NumberB" class="col-lg-2"></label>
            <input type="number" asp-for="NumberB" class="col-lg-2" />
        </div>
        <div class="row">
            <label asp-for="OperationType" class="col-lg-2"></label>
            <select asp-for="OperationType" class="col-lg-2" asp-items="Html.GetEnumSelectList<OperationType>()">
                <option selected="selected" value="">Select</option>
            </select>
        </div>
        <div class="row">
            <label asp-for="Result" class="col-lg-2"></label>
            <input type="number" disabled="disabled" class="col-lg-2" asp-for="Result" />
        </div>
        <div class="row">
            <input type="submit" value="Submit" asp-action="Index" />
        </div>
    </div>
</form>

View the Result in the browser.

This is the model used here.

public class Operation  
{  
    [Display(Name = "First Number")]  
    public double NumberA { get; set; }  
    [Display(Name = "Second Number")]  
    public double NumberB { get; set; } 
    [Display(Name = "Result")]  
    public double Result { get; set; }  
    [Display(Name = "Operation")]  
    public OperationType OperationType { get; set; }  
}

public enum OperationType  
{  
    Addition,  
    Multiplication,  
    Division,  
    Subtraction  
}

Right now, only an addition is implemented.

Submit

You can implement multiplication, division, and subtraction as well. I will publish these methods in my next article.

Congratulations, you have successfully created your Web Calculator using .NET Core.

You may find more official material regarding ASP.NET Core here.

Project on GitHub


Similar Articles